<template>
<div ref="refSelf" class="row full center" style="padding:30px;">

    <div class="shrink0 column gap20"> 

        <div class="row item-center shrink0 gap10" style="margin-bottom:10px">
            <n-button @click="bus.emit('topview.enter()','hall')" title="返回" quaternary style="padding: 0 20px 0 0; ">
                <n-icon size="20"><ArrowBackIosOutlined /></n-icon>
            </n-button>
            <h1 class="noselect" style="margin:0">投屏</h1>
        </div>

        <n-card class="grow column" style="width:800px" content-style="display:flex;flex-direction:column">
            <n-tabs v-model:value="activeSource" @update:value="changeSource" size="large" style="margin-bottom:10px">
                <n-tab name="screen" tab="屏幕/窗口"></n-tab>
                <n-tab name="live2d" tab="纸片人"></n-tab>
                <n-tab name="media" tab="媒体"></n-tab>
                <n-tab v-if="isDebug" name="frames" tab="帧序列"></n-tab>
            </n-tabs>

            <PaneScreen v-show="activeSource=='screen'" ref="refPaneScreen" class="grow"></PaneScreen>
            <PaneLive2D v-show="activeSource=='live2d'" ref="refPaneLive2D" class="grow"></PaneLive2D>
            <PaneMedia v-show="activeSource=='media'" ref="refPaneMedia" class="grow"></PaneMedia>
            <PaneFrames v-show="activeSource=='frames'" ref="refPaneFrames" class="grow"></PaneFrames>
        </n-card>

        <n-card>
            <PanePoster ref="refPoster"></PanePoster>
        </n-card>

    </div>

</div>
</template>

<script setup lang="ts">

import { ref, Ref, onMounted, provide, computed } from 'vue'
import { bus } from '@beshell/events-ts/bus';
import { conn } from '@beshell/conn-ts/Connection';
import { ArrowBackIosOutlined } from '@vicons/material'
import PaneScreen from './PaneScreen.vue'
import PaneLive2D from './PaneLive2D.vue'
import PaneMedia from './PaneMedia.vue'
import PaneFrames from './PaneFrames.vue'
import PanePoster from './PanePoster.vue'
import {FrameBuffer} from './FrameBuffer'

import {isDebug} from '../../issue'

const quality = ref(80)

const activeSource = ref('screen')
const activeCapture = computed(()=>{
    return mapSource[activeSource.value].value.getCapture()
})

const stageWidth = ref(320)
const stageHeight = ref(240)

const frameBuffer = new FrameBuffer()

provide('stageWidth', stageWidth)
provide('stageHeight', stageHeight)
provide('quality', quality)
provide('activeSource', activeSource)
provide('activeCapture', activeCapture)
provide('frameBuffer', frameBuffer)



let refPaneScreen = ref(null) as unknown as Ref<typeof PaneScreen>
let refPaneLive2D = ref(null) as unknown as Ref<typeof PaneLive2D>
let refPaneMedia = ref(null) as unknown as Ref<typeof PaneMedia>
let refPaneFrames = ref(null) as unknown as Ref<typeof PaneFrames>
let refPoster = ref(null) as unknown as Ref<typeof PanePoster>

const mapSource = {
    screen: refPaneScreen ,
    live2d: refPaneLive2D ,
    media: refPaneMedia ,
    frames: refPaneFrames ,
}

onMounted(()=>{
})


async function enter() {
    
    if(conn.isConnected) {
        try{
            [stageWidth.value, stageHeight.value] = await conn.console.call(`[be.disp[0].width(), be.disp[0].height()]`)
        }catch(e) {
            console.error(e)
        }
    }

    refPaneScreen.value.onenter()
    refPaneLive2D.value.onenter()
    refPaneMedia.value.onenter()
    refPoster.value.onenter()
}
function leave() {
    // stage.stop()
}



function changeSource() {
    frameBuffer.acceptSource = activeSource.value

    console.log(frameBuffer.acceptSource)
}




defineExpose({
    enter, leave
})

</script>